<template>
  <div>
    <c-slot :isNeedConfig="true" class="m-slot no-margin">
      <template slot="title">{{ tname }}</template>
      <template slot="config">
        <ChooseScreen 
          :selectATit="selectATit"
          :tname="tname"
          :param="param"
          :leftTreeParentId="0"
          :searchWord="searchWord"
          @getChartData="getChartData"
        ></ChooseScreen>
      </template>
      <template slot="chart">
        <ChartN
          v-if="datatype !== -1"
          :chartId="chartId"
          :chartData="chartData"
          @chartDom="chartDom"
          @contrastiveData="getContrastiveData"
        />
        <div v-if="loading" class="chart-loading-box">
          <loading1 :emptyText="emptyText" />
        </div>
      </template>
      <template slot="type">
        <!-- <i class="icon el-icon-download" @click="exportData">导出数据</i> -->
        <i class="icon el-icon-download" @click="downloadImg">保存图片</i>
      </template>
    </c-slot>

    <!-- 表格 -->
    <div id="chart-tab" class="chart-tab">
      <ul class="chart-tab-ul">
        <li class="tit">
          <p v-for="(item, index) in tableData.tit" :key="index">{{ item }}</p>
        </li>
        <li
          v-for="(item, index) in tableData.content"
          :key="index"
          class="content"
        >
          <p>{{ index + 1 }}</p>
          <p v-for="(ite, j) in item" :key="j">{{ ite }}</p>
        </li>
      </ul>
    </div>

    <!-- 对比分析 -->
    <!-- <Contrastive ref="contrastive" /> -->
  </div>
</template>

<script>
import axios from "axios";
import { mapState } from "vuex";
import CSlot from "@/views/modules/Analysis/CSlot";
import ChartN from "../charts/ChartN";
import {
  refactor,
  getYear,
  downloadChartImg,
  transCNCountry,
  isShowContrastBtn,
} from "@/utils/utils";
import base64 from "@/utils/base64.js";
// import Contrastive from "../Contrastive";
import ChooseScreen from './chooseScreen.vue'
import mixin from "@/mixins/expert";

export default {
  mixins: [mixin],
  props: {
    chartTempl: {
      type: Object,
    },
    dcData: {
      type: Object
    }
  },
  components: {
    CSlot,
    ChartN,
    // Contrastive,
    ChooseScreen,
  },
  data() {
    return {
      searchTxt:'',
      loading: true,
      cancel: null,
      tname: "", // 标题
      param: {}, // 图表参数
      charttype: -1, // 图表类型
      selectATit: "", // 筛选条件B，动态
      timeType: "isd", // 设置时间筛选类型
      chartId: "", // 图表id名称
      datatype: -1, // 图表数据类型
      chartData: [],
      chartType: "line",
      dom: {},
      tableData: {
        tit: [],
        content: [],
      },
      yearArr: [],
      contrastiveData: [], // 对比分析的数据
      emptyText: "数据加载中...",
    };
  },
  computed: {
    ...mapState(["searchWord"]),
  },  
  watch: {
    // chartTempl() {
    //   this.init();
    // },
    dcData() {
      this.init()
    }
  },
  mounted() {
    // this.init();
  },
  methods: {
    init() {
      this.loading = false;
      this.tname = this.chartTempl.tname;
      this.param = this.chartTempl.tdata.param;
      this.charttype = this.chartTempl.tdata.charttype;
      this.chartId = "chart" + this.chartTempl.id;
      this.datatype = this.chartTempl.tdata.datatype;
    },

    getChartData(Params) {
      if (this.cancel !== null) {
        this.cancel();
      }
      this.loading = true;
      this.emptyText = "数据加载中...";
      this.chartData = [];
      this.tableData = {
        tit: [],
        content: [],
      };
    },
    chartDom(dom) {
      this.dom = dom;
      this.analysisExport();
    },
    downloadImg() {
      downloadChartImg(this.dom);
    },

    // 对比分析
    getContrastiveData(data) {
      this.contrastiveData = data;
    },
    // handleShowContrastive() {
    //   if (this.contrastiveData.length <= 0) {
    //     this.$message.warning("请至少选择一项数据！");
    //     return;
    //   }
    //   this.$refs.contrastive.init(this.contrastiveData);
    // },
    // 导出数据
    exportData() {
      let aoa = [];
      let content = [];
      this.tableData.content.forEach((v, i) => {
        content.push([i, ...v]);
      });
      aoa = [this.tableData.tit, ...content];
      var ws =
        XLSX.utils.aoa_to_sheet(aoa); /* 新建空workbook，然后加入worksheet */
      var wb = XLSX.utils.book_new(); /*新建book*/
      XLSX.utils.book_append_sheet(
        wb,
        ws,
        name
      ); /* 生成xlsx文件(book,sheet数据,sheet命名) */
      XLSX.writeFile(wb, `${this.tname}.xlsx`);
    },
  },

  beforeDestroy() {
    if (this.cancel !== null) {
      this.loading = false;
      this.cancel();
    }
  },
};
</script>

<style lang="scss">
</style>